<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <!-- 销量图 -->
      <v-flex xs10 md6>
        <v-card>
          <v-card-text class="px2">
            <div ref="sale" style="width: 100%; height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>

      <!-- 利润占比图 -->
      <v-flex xs10 md6>
        <v-card >
          <v-card-text class="px2">
            <div ref="pie" style="width: 100%;height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>

    <!-- 资产负债图 -->
    <v-layout row wrap>
      <v-flex xs10 md6>
        <v-card>
          <v-card-text class="px2">
            <div ref="assets" style="width: 100%; height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>

      <!-- 雷达图 -->
      <v-flex xs10 md6>
        <v-card >
          <v-card-text class="px2">
            <div ref="radar" style="width: 100%;height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>

  </v-container>
</template>

<script>
    // 引入 ECharts 主模块
    var echarts = require('echarts');
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/pie');

    export default {
        name: "dashboard",
        data(){
            return {

            }
        },
        mounted(){
            this.$nextTick(() => {
                /* 销量图 */
                var sale = echarts.init(this.$refs.sale);
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '销量统计'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["朝阳","邓禄普","米其林","金路","普利斯通","正新","韩泰","玛吉斯","佳通","三角","双喜","万力","双星"],
                        axisLabel:{
                            interval: 0,    //横轴信息全部显示
                            rotate: -30,    //-30度角倾斜显示
                        }
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [30, 20, 36, 10, 10, 20, 10, 10, 20, 20, 10, 10, 20]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                sale.setOption(option);

                /*利润占比图*/
                const pie = echarts.init(this.$refs.pie);
                pie.setOption({
                    roseType: 'angle',
                    title: {
                        text: '利润占比'
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            data:[
                                {value:235, name:'朝阳'},
                                {value:274, name:'邓禄普'},
                                {value:310, name:'米其林'},
                                {value:335, name:'金路'},
                                {value:235, name:'正新'},
                                {value:274, name:'韩泰'},
                                {value:310, name:'玛吉斯'},
                                {value:335, name:'佳通'},
                                {value:274, name:'双星'},
                                {value:310, name:'万力'},
                                {value:335, name:'双喜'},
                                {value:300, name:'三角'}
                            ]
                        }
                    ],
                    itemStyle: {
                        emphasis: {
                            // 阴影的大小
                            shadowBlur: 200,
                            // 阴影水平方向上的偏移
                            shadowOffsetX: 0,
                            // 阴影垂直方向上的偏移
                            shadowOffsetY: 0,
                            // 阴影颜色
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                });

                /*资产负债图*/
                var assets = echarts.init(this.$refs.assets);
                var option = {
                    title: {
                        text: '资产负债图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总资产', '流动资产', '固定资产', '长期负债', '流动负债']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '流动资产',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '固定资产',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '长期负债',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '流动负债',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '总资产',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                assets.setOption(option);

                /*雷达图，预算分配和实际开销对比*/
                var radar = echarts.init(this.$refs.radar);
                radar.setOption({
                    title: {
                        text: '财务预算'
                    },
                    tooltip: {},
                    legend: {
                        x:'right',            //可设定图例在左、右、居中
                        y:'top',           //可设定图例在上、下、居中
                        padding:[0,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                        data: ['预算分配', '实际开销']
                    },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator: [
                            { name: '销售', max: 6500},
                            { name: '管理', max: 16000},
                            { name: '信息技术', max: 30000},
                            { name: '客服', max: 38000},
                            { name: '研发', max: 52000},
                            { name: '市场', max: 25000}
                        ]
                    },
                    series: [{
                        name: '预算 vs 开销',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data: [
                            {
                                value: [4300, 10000, 28000, 35000, 50000, 19000],
                                name: '预算分配'
                            },
                            {
                                value: [5000, 14000, 28000, 31000, 42000, 21000],
                                name: '实际开销'
                            }
                        ]
                    }]
                });
            })
        }
    }
</script>

<style scoped>

</style>
